<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 缩放的Line
 * @LastEditTime: 2021-11-11 10:38:56
 * @FilePath: \tianjushi-kanban\src\components\charts\InverseBar2.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import {
  onMounted,
  toRefs,
  ref,
  reactive,
  watch,
  computed,
  nextTick,
  version,
} from "vue";
import { resetChartStyle, showLoading, hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: [
        {
          name: 'A',
          value: 612.5,
        },
        {
          name: 'B',
          value: 512.5,
        },
        {
          name: 'C',
          value: 412.5,
        },
        {
          name: 'D',
          value: 312.5,
        },
        {
          name: 'E',
          value: 212.5,
        }, 
        {
          name: 'D',
          value: 312.5,
        },
        {
          name: 'E',
          value: 212.5,
        }, 
        {
          name: 'D',
          value: 312.5,
        },
        {
          name: 'E',
          value: 212.5,
        }, 
      ],
    },
    color: {
      default: ['#26C5A2','#FE9C5A'],
      type: Number,
    },
    fontSize: {
      default: 16,
      type: Number,
    },
    unit: {
      default: "unit",
      type: String,
    },
    max: {
      default: 1000,
      type: Number,
    },
    barWidth: {
      default: 45,
      type: Number,
    },
    
     grid: {
      default: [0,100,0,100],
      type: Number,
    },

  },
  setup: function (props, context) {
    let chartInstance = null; //折线不能用响应式接收echart
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {

      let barWidth = props.barWidth ;
      const category = props.chartdata; // 类别
      const total = props.max; // 数据总数
      let datas = [];
      let totals = [];
      category.forEach((value) => {
        datas.push(value.value);
        totals.push(total);
      });
      const option = {
        xAxis: {
          max: total,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: props.grid[3],
          top: props.grid[0], // 设置条形图的边距
          right: props.grid[1],
          bottom: props.grid[2],
        },
        yAxis: [
          {
            type: "category",
            inverse: false,
            data: category,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            // 内
            type: "bar",
            barWidth: barWidth*0.65,
            silent: true,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: props.color[0] },
          { offset: 1, color: props.color[1]}
        ]),
              },
            },
            label: {
              normal: {
                formatter: "{b}",
                textStyle: {
                  color: "#fff",
                  fontSize: props.fontSize,
                },
                position: "left",
                distance: 20, // 向右偏移位置
                show: true,
              },
            },
            data: category,
            z: 1,
            animationEasing: "elasticOut",
          },

          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#07314a",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 2,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [3, barWidth*0.65],
            symbolPosition: "start",
            symbolOffset: [3, -4],
            symbolBoundingData: total,
            data: totals,
            z: 2,
            animationEasing: "elasticOut",
          },
          {
            // label
            type: "pictorialBar",
            symbolBoundingData: total,
            itemStyle: {
              normal: {
                color: "none",
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  var text;
                  text =
                    "{f| " + params.data +props.unit+ "}";
                  return text;
                },
                rich: {
                  f: {
                    color: "#ffffff",
                    fontSize: props.fontSize,
                  },
                },
                position: "right",
                distance: 10, // 向右偏移位置
                show: true,
              },
            },
            data: datas,
            z: 0,
          },

          {
            name: "外框",
            type: "bar",
            barGap: "-130%", // 设置外框粗细
            data: totals,
            barWidth: barWidth,
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 5, 5],
                color: "transparent", // 填充色
                barBorderColor: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: props.color[0] },
          { offset: 1, color: props.color[1] }
        ]), // 边框色
                barBorderWidth: 3, // 边框宽度
              },
            },
            z: 0,
          },
          {
            type: "scatter",
            name: "条形",
            symbol: "roundRect",
            symbolSize: [7, barWidth*0.6],
            symbolOffset: [3, -5],
            symbolKeepAspect: true,
            itemStyle: {
              normal: {
                color: "#FE9C5A",
              },
            },
            data: totals,
          },
        ],
      };
      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>